<script setup lang="ts">
import { useMoneyStore } from '@/store/money';
import { useVipStore } from '@/store/vip';
import { useRouter } from 'vue-router';
import { Back } from '@element-plus/icons-vue';
const route = useRouter()
const money = useMoneyStore()
const vip = useVipStore()
const moneyList = [10, 30, 50, 100, 300, 648]
const back = () => {
    route.back()
}
const Window: any = window
const recClick = async (num: number) => {
    if (num < 648 && !vip.vip) {
        const res = await Window.app.recNotVip()
        if (res) {
            route.push({
                path: '/recmoney',
                query: {
                    money: 114514,
                    mode: 'vip'
                }
            })
        }
    }
    else {
        route.push({
            path: '/recmoney',
            query: {
                money: num,
                mode: ''
            }
        })
    }
}
</script>
<template>
    <el-button @click="back" :icon="Back">返回</el-button>
    <div class="money">
        <el-text class="moneytext">可用余额：{{ money.money }}￥</el-text>
        <el-text>vip状态：{{ vip.vip ? "豪华至尊vip" : "无" }}</el-text>
    </div>
    <div class="recMoney">
        <div class="mon" v-for="(item) in moneyList" @click="recClick(item)">
            <h1> {{ item }}￥</h1>
        </div>
    </div>
</template>
<style scoped>
.recMoney {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.recMoney .mon {
    cursor: pointer;
    display: flex;
    text-align: center;
    border: 1px solid black;
    height: 100px;
    justify-content: center;
    align-items: center;
}

.money {
    margin-top: 10px;
    margin-left: 10px;
}

.money .moneytext {
    margin-right: 20px;
}
</style>